<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
</head>

<style>
    /*选中p标签块中的第一行*/
    p:first-line{
        background-color: tomato;
    }

    /*选中p标签块中的第一个字母*/
    p:first-letter{
        background-color: #de8d8d;
    }


    /*在div标签前添加元素*/
    div:before{
        content: "div标签前的内容";
        color: red;
        font-size: 12px;
    }

    /*在div标签后添加元素*/
    div:after{
        content: "div标签后的内容";
        color: purple;
        font-size: 12px;
    }


</style>


<body>


<div>这是div标签</div>

<p>
    我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签
    我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签
    我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签
</p>



</body>
</html>